<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>系统账号管理</title>
    <script src="../commonCss.js"></script>
    <script src="../commonJs.js"></script>
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/treetable/jquery.treetable.css" />
    <link rel="stylesheet" href="../../css/treetable/jquery.treetable.theme.default.css" />
    <link rel="stylesheet" href="../../css/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="../../css/ztree/demo.css" type="text/css">

    <script type="text/javascript" src="../../js/jq.js"></script>
    <script type="text/javascript" src="../../js/plugin/bootstrapvalidator/bootstrapValidator.min.js"></script>
    <script type="text/javascript" src="../../js/common.js"></script>
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script type="text/javascript" src="../../js/libs/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript" src="../../js/my/ztree-menu.js"></script>
</head>

<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <div class="ctc_title">系统账号管理</div>
    <div class="down_line"></div>
</section>

<!-- Main content -->
<section class="content" >
    <div class="row">
        <div class="col-xs-12">
            <div class="box-header">
                <form class="form-inline">
                    <div class="form-group">
                        <label>查询：</label>
                        <input style="width: 200px;" class="form-control" type="text" id="key"  placeholder="输入账号或名称搜索"/>
                    </div>
                    <div class="form-group">
                        <button type="button"  onclick="getData()"  class="btn btn-block btn-primary">搜索</button>
                    </div>
                    <div style="float: right ">
                        <div class="form-group" style="margin-right: 20px;">
                            <button type="button" onclick="addInfo()" class="btn btn-block btn-primary">新增账号</button>
                        </div>
                    </div>

                </form>
            </div>

            <div class="box-body" style="height:100%;">
                <table id="dataList" class="table table-bordered table-hover" >
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>账号</th>
                        <th>用户名称</th>
                        <th>菜单权限</th>
                        <th>账号状态</th>
                        <th>创建时间</th>
                        <th>修改时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody >
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

<!-- 【编辑】弹出窗内容 -->
<div class="modal" id="editPanel" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" align="center" id="mopTitle"></h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" onsubmit="return false" id="form">
                    <fieldset  style="margin-top: 1%;">
                        <input type="hidden" id="id" name="id">
                        <div id="account_div" class="form-group" style="display: none">
                            <label class="col-md-2 control-label" >账号</label>
                            <div class="col-md-10">
                                <input class="form-control" placeholder="账号" type="text" name="account" id="account" onblur="isExitCheckAdmin()">
                            </div>
                        </div>
                        <div id="password_div" class="form-group" style="display: none">
                            <label class="col-md-2 control-label" >账号密码</label>
                            <div class="col-md-10">
                                <input class="form-control" placeholder="账号密码" type="text" name="password" id="password" onblur="checkPwd()">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label" >用户名称</label>
                            <div class="col-md-10">
                                <input class="form-control" placeholder="用户名称" type="text" name="nickName" id="nickName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">状态</label>
                            <div class="col-md-10">
                                <select name="status"  id="status" class="form-control input-sm">
                                    <option value="1">正常</option>
                                    <option value="0">冻结</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">权限</label>
                            <div class="col-md-10">
                                <input type="hidden" id="permission" name="permission">
                                <ul id="treeDemo" class="ztree"></ul>
                            </div>
                        </div>

                    </fieldset>
                </form>
            </div>
            <div class="modal-footer" style="text-align: center">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="confirmEditConfig();">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 【重置密码】弹出窗内容 -->
<div class="modal" id="resetPanel" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <input type="hidden" id="changeId">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" align="center">提示</h4>
            </div>
            <div class="modal-body">
                <h5 align="center">确定重置该账号的密码吗？</h5>
                <h3 align="center" style="color: gray;">重置后的密码为：123456</h3>
            </div>
            <div class="modal-footer" style="text-align: center">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" class="btn btn-primary"  onclick="confirmRest();">确定</button>
            </div>
        </div>
    </div>
</div>

<script>
    //校验数字或字母的正则表达式
    var checkMsg = /^\w+$/;

    $(document).ready(function() {
        layui.use('layer', function(){
            var layer = layui.layer;
        });
        //加载数据
        getData();
    });

    // 加载数据
    function getData(){
        var table = $('#dataList').DataTable({
            "destroy": true,   //可以重新初始化，用于搜索
            "lengthChange": false,
            "ordering": false,   //排序
            "info": true,		   //
            "autoWidth": false,   //宽度自动
            "paging": true,      //分页
            "searching": false,  //全局搜索关闭
            "processing": true,  //开启显示‘正在加载.../processing’
            "serverSide":true,    //true代表后台处理分页，false代表前台处理分页
            "ajax" :  {
                url:"/sysadmin/getAdminList",
                type:"POST",
                data:{key : $("#key").val()}
            },
            //参数显示
            "columns": [
                {"data": "id", 'sClass': "text-center",'width': '5%'},
                {"data": "account", 'sClass': "text-center",'width': '15%'},
                {"data": "nickName", 'sClass': "text-center",'width': '15%'},
                {"data": "permission", 'sClass': "text-center",'width': '15%'},
                {"data": "status", 'sClass': "text-center","width":'7%',
                    "render":function(data,type,full,meta){
                        var str="";
                        if(data == 0){
                            str="<span class='label label-danger' style='padding-left:10px;padding-right:10px;padding-top: inherit;'>冻结</span>";
                            return str;
                        }else{
                            str="<span class='label label-success' style='padding-left:10px;padding-right:10px;padding-top: inherit;' >正常</span> ";
                            return str;
                        }
                    }
                },
                {"data": "createTime", 'sClass': "text-center",'width': '12%',
                    "render":function( data, type, full, meta) {
                        return toDate(data).format('yyyy-MM-dd HH:mm:ss');
                    }
                },
                {"data": "modifyTime", 'sClass': "text-center",'width': '12%',
                    "render":function( data, type, full, meta) {
                        return toDate(data).format('yyyy-MM-dd HH:mm:ss');
                    }
                },
                {"data":"id" , 'sClass': "text-center" ,'width':'10%',
                    "render": function (data, type, full, meta ) {
                        var str = "";
                        if(data != 1){
                            str = str + "<a href = '#' title='编辑' onclick=editInfo("+ data  +");><i class='\tglyphicon glyphicon-pencil'></i></a>&nbsp;&nbsp;&nbsp;";
                            str = str + "<a href = '#' title='删除' onclick = deleteInfo("+ data +");><i class='glyphicon glyphicon-trash'></i></a>&nbsp;&nbsp;&nbsp;";
                            str = str + "<a href = '#' title='重置密码' onclick = resetInfo("+ data +");><i class='glyphicon glyphicon-cog'></i></a>&nbsp;&nbsp;&nbsp;";
                        }
                        return str;
                    }
                }
            ],

            //是否开启主题
            "bJQueryUI": true,
            "oLanguage": {    // 语言设置
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sZeroRecords": "没有检索到数据",
                "sSearch": "检索:",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            }
        });
    }

    //编辑账号信息
    function editInfo(id) {
        $("#account_div").css("display",":none");
        $("#password_div").css("display",":none");
        $.ajax({
            type:"POST",
            url:"/sysadmin/getAdminById",
            async : true,//默认就是true
            dataType:"json",
            data:{id : id},
            success : function(data) {
                $("#id").val(data.id);
                $("#nickName").val(data.nickName);
                $("#status").val(data.status);
                $("#permission").val(data.permission);
            }
        });
        $.fn.zTree.init($("#treeDemo"), getSettting(), getMenuTree());
        initMenuDatas(id);
        $("#mopTitle").text("编辑管理账号信息");
        $("#editPanel").modal("toggle");//弹窗打开
    }

    //打开新增窗口
    function addInfo() {
        $("#account_div").css("display","block");
        $("#password_div").css("display","block");

        $("#id").val("");
        $("#account").val("");
        $("#nickName").val("");
        $("#status").val("1");
        $("#permission").val("");
        $("#mopTitle").text("新增管理账号");

        $.fn.zTree.init($("#treeDemo"), getSettting(), getMenuTree());
        $("#editPanel").modal("toggle");//弹窗打开
    }

    //保存
    function confirmEditConfig(){
        var id = $("#id").val();
        var sendUrl = "";
        if(id == ""){
            sendUrl = '/sysadmin/saveAdmin';
            if($("#account").val() == ''){
                layer.msg("账号不能为空");
                return ;
            }
            if($("#password").val() == ""){
                layer.msg("密码不能为空！");
                return ;
            }
        }else{
            sendUrl = '/sysadmin/updateAdmin';
        }
        $("#permission").val(getCheckedMenuIds());
        var formdata = $("#form").serializeObject();
        console.log(getCheckedMenuIds())

        $.ajax({
            type : 'post',
            url : sendUrl,
            contentType: "application/json; charset=utf-8",
            data : JSON.stringify(formdata),
            success : function(data) {
                layer.msg(data.msg, {shift: -1, time: 1000}, function(){
                    location.href = "sysAdminList.html";
                    // $("#editPanel").modal("toggle");//弹窗打开
                });
            }
        });
    }

    //校验账号是否存在
    function isExitCheckAdmin() {
        var account = $("#account").val();
        if(!checkMsg.test(account)){
            layer.msg("账号必须是要英文字母或数字组成");
            $("#account").val("");
            return ;
        }

        $.ajax({
            type : 'post',
            url : '/sysadmin/isExitCheckAdmin',
            async : true,//默认就是true
            dataType:"json",
            data : {account : account},
            success : function(data) {
                if(data.status == 0){
                    layer.msg(data.msg);
                    $("#account").val("");
                }
            }
        });

    }
    //校验密码的合法性
    function checkPwd() {
        var pwd = $("#password").val();
        if(pwd == ""){
            layer.msg("密码不能为空！");
            return ;
        }
        if(!checkMsg.test(pwd)){
            layer.msg("密码必须是要英文字母或数字组成");
            $("#password").val("");
            return ;
        }
    }

    //删除账号
    function deleteInfo(id) {
        if(confirm("确定要删除吗？")) {
            $.ajax({
                type: 'post',
                url: "/sysadmin/deleteAdminById",
                async: true,//默认就是true
                dataType: "json",
                data: {id: id},
                success: function (data) {
                    layer.msg(data.msg, {shift: -1, time: 1000}, function () {
                        location.href = "sysAdminList.html";
                    });
                }
            });
        }
    }

    //重置密码弹框
    function resetInfo(id) {
        $("#changeId").val(id);
        $("#resetPanel").modal("toggle");//弹窗打开
    }

    //重置密码
    function confirmRest() {
        var password = "123456";
        $.ajax({
            type : 'post',
            url : "/sysadmin/restAdminPwd",
            async : true,//默认就是true
            dataType:"json",
            data :{password : password,id : $("#changeId").val()},
            success : function(data) {
                layer.msg(data.msg, {shift: -1, time: 1000}, function(){
                   location.href = "sysAdminList.html";
                });
            }
        });
    }

</script>
</body>
</html>
